<script setup>
import 'jiuqi-ui'
import {defineEmits, inject, provide, reactive, ref, watch} from "vue";
import FormulaItemSelector from "./FormulaItemSelector.vue";

//================================================【组件通信】============================================================
//默认展示
const defaultShow = ref('')
//返回参数
const generateParameter = reactive({
    tableName:defaultShow.value,
    quotaName:defaultShow.value,
    memberCode:defaultShow.value
})
//需要通知子组件 当前 选择的表名（英文）
provide('currentParameter',generateParameter)

//控制  取数公式入口模态框  显示 和 隐藏
const genFormulaVisible = inject('genFormulaVisible')

//控制 取数公式选择模态框 显示和隐藏
const formulaItemSelectorVisible = ref(false)
provide('formulaItemSelectorVisible',formulaItemSelectorVisible)
//与父组件通信
const emits = defineEmits(['selfConfirmReturnParam']);
//================================================【组件属性】============================================================
//设置取数字段、取数维度 右侧按钮 不可用
const tableFieldDisable = ref(false)
watch(()=>generateParameter.tableName,(newValue)=>{
    if (newValue === defaultShow.value){
        tableFieldDisable.value = true
        generateParameter.quotaName = defaultShow.value
        generateParameter.memberCode = defaultShow.value
    }else {
        tableFieldDisable.value = false
        generateParameter.quotaName = defaultShow.value
        generateParameter.memberCode = defaultShow.value
    }
},{deep:true,immediate:true})
//================================================【公用相关】============================================================
//==================================================================【选择公式项】
const deliverSelectType = ref('')
function selectFormulaItem(selectType) {
    genFormulaVisible.value = false

    //查询内容类型
    deliverSelectType.value = selectType
    //取数公式选择模态框打开
    formulaItemSelectorVisible.value = true
}
//================================================【普通方法】============================================================
//==================================================================【表单验证相关】
const genFormulaFormRules = {
    tableName: [
        {
            required: true,
            message: '请选择取数明细表',
        }
    ],
    quotaName: [
        {
            required: true,
            message: '请选择取数字段',
        }
    ],
    memberCode:[
        {
            required: true,
            message: '请选择取数维度',
        },
    ]
}
const genFormulaForm = ref(null)
//==================================================================【点击确认生成 取数公式】
//确认按钮加载状态
const confirmLoading = ref(false)
function generateFormula() {
    if (confirmLoading.value) {
        return
    }
    //开始加载状态
    confirmLoading.value = true
    genFormulaForm.value.validate().then(validateResult => {
        if (!validateResult) {
            //返回获取参数
            emits("selfConfirmReturnParam",generateParameter)

            //还原数据
            generateParameter.tableName = defaultShow.value
            generateParameter.quotaName = defaultShow.value
            generateParameter.memberCode = defaultShow.value

            //结束加载状态
            confirmLoading.value = false

            //关闭当前模态框
            genFormulaVisible.value = false

        }else {
            //结束加载状态
            confirmLoading.value = false
        }
    });
}
//==================================================================【点击取消生成 取数公式】
function generateCancel() {
    //还原数据
    generateParameter.tableName = defaultShow.value
    generateParameter.quotaName = defaultShow.value
    generateParameter.memberCode = defaultShow.value

    //清空校验信息
    genFormulaForm.value.clearValidateResult()

    //关闭当前模态框
    genFormulaVisible.value = false
}

//==================================================================【控制自身组件显示】
function selfVisiable() {
    genFormulaVisible.value = true
    formulaItemSelectorVisible.value = false
}
//================================================【生命周期】============================================================
</script>

<template>
    <j-modal
        v-model="genFormulaVisible"
        title="快速生成取数公式"
        :fullscreenable='false'
        :mask="false"
        :mask-closable="false"
        :closable="!confirmLoading"
    >
        <j-modal-content size="small" class="modalContent">
            <j-form
                ref="genFormulaForm"
                :rules="genFormulaFormRules"
                :model="generateParameter"
                label-position="right"
                :label-width="80"
                style="margin: 23px 0px 0px 65px"
            >
                <j-form-item label="取数明细表" prop="tableName" required>
                    <j-input
                        class="selectedContent"
                        readonly
                        placeholder="请选择取数明细表"
                        v-model="generateParameter.tableName"
                    >
                        <template #suffix>
                            <j-icon type="icon-more" @click="selectFormulaItem('tableName')"></j-icon>
                        </template>
                    </j-input>
                </j-form-item>
                <j-form-item label="取数维度"  prop="memberCode" required>
                    <j-input
                        class="selectedContent"
                        readonly
                        placeholder="请选择取数维度"
                        v-model="generateParameter.memberCode"
                    >
                        <template #suffix>
                            <div v-if="tableFieldDisable">
                                <j-icon
                                    type="icon-more"
                                ></j-icon>
                            </div>
                            <div v-else>
                                <j-icon
                                    type="icon-more"
                                    @click="selectFormulaItem('memberCode')"
                                ></j-icon>
                            </div>
                        </template>
                    </j-input>
                </j-form-item>
                <j-form-item label="取数字段" prop="quotaName" required>
                    <j-input
                        class="selectedContent"
                        readonly
                        placeholder="请选择取数字段"
                        v-model="generateParameter.quotaName "
                    >
                        <template #suffix>
                            <div v-if="tableFieldDisable">
                                <j-icon
                                    type="icon-more"
                                ></j-icon>
                            </div>
                            <div v-else>
                                <j-icon
                                    type="icon-more"
                                    @click="selectFormulaItem('quotaName')"
                                ></j-icon>
                            </div>
                        </template>
                    </j-input>
                </j-form-item>
            </j-form>
        </j-modal-content>
        <template #footer>
            <j-space style="justify-content: flex-end">
                <j-button @click="generateCancel" :disabled="confirmLoading">取消</j-button>
                <j-button type="primary" :loading="confirmLoading" @click="generateFormula">确定</j-button>
            </j-space>
        </template>
    </j-modal>
    <FormulaItemSelector
        :show="formulaItemSelectorVisible"
        :select-type="deliverSelectType"
        @selfCloseParentVisable="selfVisiable">
    </FormulaItemSelector>
</template>

<style scoped>
.modalContent{
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}
._container_5ba0d_25[readonly]{
    background-color: white !important;
}
.selectedContent{
    width: 250px;
    height: 25px;
    opacity:1 !important;
    background: transparent !important;
    /*border: 1px red solid;*/
}
</style>
